Google Maps API ব্যবহার করে আপনার ওয়েবসাইট বা অ্যাপে বিভিন্ন স্থানের অবস্থান (locations) প্রদর্শন করতে Markers ব্যবহার করা হয়। Markers হল মানচিত্রে ছোট পিন বা আইকন যা নির্দিষ্ট অবস্থান নির্দেশ করে। Markers এর মাধ্যমে আপনি ব্যবহারকারীদের মানচিত্রে নির্দিষ্ট স্থান বা এলাকা সম্পর্কে তথ্য প্রদান করতে পারেন। এই টিউটোরিয়ালে, আমরা জানব কিভাবে গুগল ম্যাপস ব্যবহার করে Markers তৈরি এবং মানচিত্রে প্রদর্শন করা যায়।
Markers এর মাধ্যমে Locations প্রদর্শন করার জন্য প্রয়োজনীয় উপকরণ
- Google Maps API Key: Google Maps API ব্যবহার করার জন্য আপনাকে একটি API Key প্রয়োজন হবে। এটি গুগল ক্লাউড কনসোল থেকে পাওয়া যায়।
- HTML ফাইল: Google Maps API এবং আপনার মানচিত্রের জন্য HTML ফাইল তৈরি করতে হবে।
- JavaScript: Markers যুক্ত করার জন্য কিছু JavaScript কোড লেখার প্রয়োজন হবে।
Markers দিয়ে Locations প্রদর্শন করার ধাপ
১. Google Maps API Key প্রাপ্তি
আপনার গুগল ম্যাপস API ব্যবহার করার জন্য গুগল ক্লাউড কনসোল (Google Cloud Console) থেকে API Key সংগ্রহ করুন। এই Key গুগল ম্যাপস API-তে আপনার অ্যাপ্লিকেশনকে অ্যাক্সেস দিতে সহায়তা করবে।
২. HTML ফাইল তৈরি করা
এখন একটি HTML ফাইল তৈরি করুন যেখানে গুগল ম্যাপস এবং Markers প্রদর্শন করবেন।
<!DOCTYPE html>
<html>
<head>
<title>Simple Map with Marker</title>
<style>
/* মানচিত্রের সাইজ নির্ধারণ করা */
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>গুগল ম্যাপস - Markers সহ</h3>
<div id="map"></div>
<script>
// গুগল ম্যাপস API লোড করা
function initMap() {
// মানচিত্রের অবস্থান নির্ধারণ
var location = { lat: 23.8103, lng: 90.4125 }; // উদাহরণস্বরূপ, ঢাকা শহরের অবস্থান
// মানচিত্র তৈরি করা
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: location
});
// Markers যুক্ত করা
var marker = new google.maps.Marker({
position: location,
map: map,
title: "এটি ঢাকা!"
});
}
</script>
<!-- Google Maps API লোড করা (আপনার API Key দিয়ে এটি প্রতিস্থাপন করুন) -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
কোডের ব্যাখ্যা
- মানচিত্রের ডিভ (div):
<div id="map"></div>এই অংশটি মানচিত্র প্রদর্শনের জন্য ব্যবহার করা হয়। এর সাইজ CSS দিয়ে নির্ধারণ করা হয়েছে। - initMap ফাংশন: এটি একটি জাভাস্ক্রিপ্ট ফাংশন যা মানচিত্রকে ইনিশিয়ালাইজ (initialize) করে। এই ফাংশনে আপনি মানচিত্রের কেন্দ্র (center) এবং জুম লেভেল (zoom level) সেট করতে পারেন।
- Marker তৈরি:
google.maps.Markerএর মাধ্যমে একটি marker তৈরি করা হয় এবং এটি মানচিত্রের নির্দিষ্ট অবস্থানে প্রদর্শিত হয়। - Google Maps API:
<script>ট্যাগে Google Maps API কোড দেওয়া হয়েছে, যেখানে আপনার API Key প্রদান করতে হবে। এটিasync deferএট্রিবিউট ব্যবহার করে লোড করা হয়।
Markers এর মাধ্যমে একাধিক অবস্থান প্রদর্শন করা
আপনি একাধিক Markers ব্যবহার করে বিভিন্ন স্থান প্রদর্শন করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:
function initMap() {
var locations = [
{ lat: 23.8103, lng: 90.4125, title: "ঢাকা" }, // ঢাকা
{ lat: 22.3569, lng: 91.7832, title: "চট্টগ্রাম" }, // চট্টগ্রাম
{ lat: 24.3630, lng: 88.6241, title: "রাজশাহী" } // রাজশাহী
];
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: { lat: 23.685, lng: 90.3563 }
});
// প্রতিটি অবস্থানের জন্য Marker তৈরি করা
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i],
map: map,
title: locations[i].title
});
}
}
এখানে, তিনটি ভিন্ন শহরের জন্য Markers তৈরি করা হয়েছে। প্রতিটি শহরের জন্য আলাদা lat, lng, এবং title নির্ধারণ করা হয়েছে।
Google Maps API এর মাধ্যমে Markers ব্যবহার করে আপনি সহজেই আপনার ওয়েবসাইটে বা অ্যাপে বিভিন্ন স্থান প্রদর্শন করতে পারেন, যা ব্যবহারকারীদের জন্য মানচিত্রের মাধ্যমে সহজে তথ্য গ্রহণযোগ্য করে তোলে।
Read more
